import React, { useEffect } from 'react';
import { Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';

interface IUserData {
    key: string;
    /**
     * 用户名
     */
    username: string;
    /**
     * 用户id
     */
    userid: string;
    /**
     * 学校
     */
    school?: string;
    /**
     * 专业
     */
    major?: string;
    /**
     * 个性签名
     */
    signature?: string;
}

const defaultValue = (text = '未填写') => {
    return text;
};

const columns: ColumnsType<IUserData> = [
    {
        title: '用户名',
        dataIndex: 'username',
        key: 'username',
    },
    {
        title: '用户id',
        dataIndex: 'userid',
        key: 'userid',
    },
    {
        title: '学校',
        dataIndex: 'school',
        key: 'school',
        render: defaultValue,
    },
    {
        title: '专业',
        dataIndex: 'major',
        key: 'major',
        render: defaultValue,
    },
    {
        title: '个性签名',
        dataIndex: 'signature',
        key: 'signature',
        render: (text = '未填写') => {
            text = text.length > 10 ? text.slice(0, 10) + '...' : text;
            return text;
        },
    },
    {
        title: '操作',
        dataIndex: 'action',
        key: 'action',
        render: () => <a>Delete</a>,
    },
];

export default function ManagerUser() {
    const [userData, setUserData] = React.useState<IUserData[]>([]);

    useEffect(() => {
        // 发送请求获取用户数据
        // TODO
        setUserData([
            {
                key: '1',
                username: 'John Brown',
                userid: '123456',
                school: '北京大学',
                major: '计算机科学与技术',
                signature: '我是一个程序员，我是一个非酋，喜欢打游戏，但是很菜',
            },
            {
                key: '2',
                username: 'John',
                userid: '123456af',
            },
        ]);
    }, []);

    return (
        <div className="managerUser">
            <Table columns={columns} dataSource={userData} />
        </div>
    );
}
